<!--
 * @Author: Shiire
 * @Date: 2022-08-21 02:00:28
 * @LastEditors: Shiire
 * @LastEditTime: 2022-08-21 16:20:37
 * @Description: 
 * @FilePath: \grapro\src\pages\Test\index.vue
-->
<template>
  <div class="test" @scroll="onScroll">
    <h2>测试页面</h2>
    <VideoCart
      ref="videobox"
      v-for="item in videoList"
      :key="item.id"
      :videoObj="item"
      :isShow="false"
      width="320px"
      height="200px"
      style="margin: 100px auto"
    ></VideoCart>
  </div>
</template>

<script>
import VideoCart from "@/components/VideoCart";
import debounce from "@/debounce.js";
import setShowStatus from "@/utils/setShowStatus";

export default {
  name: "Test",
  components: {
    VideoCart,
  },

  data: function () {
    return {
      videoList: [
        {
          id: 12001,
          src: "http://bucket-nobo.oss-cn-shenzhen.aliyuncs.com/uploads/cover/3d7fa18c356f85337bddd1c1a4f9243f.jpeg",
          title:
            "我们建议使用 CDN 引入 Element 的用户在链接地址上锁定版本，以免将来Element 升级时受到非兼容性更新的影响。锁定版本方法请查看unpkg.com。",
          username: "Shiire",
          date: "2022-08-22",
        },
        {
          id: 12002,
          src: "http://bucket-nobo.oss-cn-shenzhen.aliyuncs.com/uploads/cover/dc296c2f782c6a610d2ed2cda5797ca8.jpeg",
          title:
            "我们建议使用 CDN 引入 Element 的用户在链接地址上锁定版本，以免将来Element 升级时受到非兼容性更新的影响。锁定版本方法请查看unpkg.com。",
          username: "Shiire",
          date: "2022-08-22",
        },
        {
          id: 12003,
          src: "http://bucket-nobo.oss-cn-shenzhen.aliyuncs.com/uploads/cover/78c6beb4c052a230d8391d03083cdc77.jpeg",
          title:
            "我们建议使用 CDN 引入 Element 的用户在链接地址上锁定版本，以免将来Element 升级时受到非兼容性更新的影响。锁定版本方法请查看unpkg.com。",
          username: "Shiire",
          date: "2022-08-22",
        },
        {
          id: 12004,
          src: "http://bucket-nobo.oss-cn-shenzhen.aliyuncs.com/uploads/cover/ef05de18cbab91cc89c33c67f2a43c50.jpeg",
          title:
            "我们建议使用 CDN 引入 Element 的用户在链接地址上锁定版本，以免将来Element 升级时受到非兼容性更新的影响。锁定版本方法请查看unpkg.com。",
          username: "Shiire",
          date: "2022-08-22",
        },
        {
          id: 12005,
          src: "http://bucket-nobo.oss-cn-shenzhen.aliyuncs.com/uploads/cover/943128d5a114112e4809c1d012cd7f70.jpeg",
          title:
            "我们建议使用 CDN 引入 Element 的用户在链接地址上锁定版本，以免将来Element 升级时受到非兼容性更新的影响。锁定版本方法请查看unpkg.com。",
          username: "Shiire",
          date: "2022-08-22",
        },
        {
          id: 12006,
          src: "http://bucket-nobo.oss-cn-shenzhen.aliyuncs.com/uploads/cover/447e05343e8dd8f8ec95a3a943260dd7.jpeg",
          title:
            "我们建议使用 CDN 引入 Element 的用户在链接地址上锁定版本，以免将来Element 升级时受到非兼容性更新的影响。锁定版本方法请查看unpkg.com。",
          username: "Shiire",
          date: "2022-08-22",
        },
        {
          id: 12007,
          src: "http://bucket-nobo.oss-cn-shenzhen.aliyuncs.com/uploads/cover/f5636d9e8e85d141cc407462a95c8f4b.jpeg",
          title:
            "我们建议使用 CDN 引入 Element 的用户在链接地址上锁定版本，以免将来Element 升级时受到非兼容性更新的影响。锁定版本方法请查看unpkg.com。",
          username: "Shiire",
          date: "2022-08-22",
        },
        {
          id: 12008,
          src: "http://bucket-nobo.oss-cn-shenzhen.aliyuncs.com/uploads/cover/13c9833bd344caba4013f51bdd7ed45d.jpeg",
          title:
            "我们建议使用 CDN 引入 Element 的用户在链接地址上锁定版本，以免将来Element 升级时受到非兼容性更新的影响。锁定版本方法请查看unpkg.com。",
          username: "Shiire",
          date: "2022-08-22",
        },
        {
          id: 12009,
          src: "http://bucket-nobo.oss-cn-shenzhen.aliyuncs.com/uploads/cover/1c32d58ed66c340f00b294a4133c2805.jpeg",
          title:
            "我们建议使用 CDN 引入 Element 的用户在链接地址上锁定版本，以免将来Element 升级时受到非兼容性更新的影响。锁定版本方法请查看unpkg.com。",
          username: "Shiire",
          date: "2022-08-22",
        },
        {
          id: 12010,
          src: "http://bucket-nobo.oss-cn-shenzhen.aliyuncs.com/uploads/cover/eedfad932774fc40b9e2c56abf14aa74.jpeg",
          title:
            "我们建议使用 CDN 引入 Element 的用户在链接地址上锁定版本，以免将来Element 升级时受到非兼容性更新的影响。锁定版本方法请查看unpkg.com。",
          username: "Shiire",
          date: "2022-08-22",
        },
      ],
    };
  },

  mounted() {
    this.init();
  },

  methods: {
    onScroll: debounce(function (event) {
      // window.innerHeight：浏览器可视区域高度
      // document.body.scrollTop || document.documentElement.scrollTop：浏览器滚动条滚过高度
      // img.offsetTop：元素距文档顶部的高度
      let scrollTop = event.target.scrollTop;
      let winTop = window.innerHeight;

      setShowStatus.call(this, scrollTop, winTop);
    }, 500),

    init() {
      let scrollTop = 0;
      let winTop = window.innerHeight;

      setShowStatus.call(this, scrollTop, winTop);
    },
  },
};
</script>

<style>
.test {
  height: 100vh;
  overflow: auto;
}
</style>